<!--
 * @Description: 饼图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: 闫晨辉 3089205282@qq.com
 * @LastEditTime: 2025-09-26 09:39:59
-->
<template>
    <div>
        <div ref="C221" style="height:220px;width:220px;"></div>
    </div>
</template>
<script>
//引入图饼
import { Pie } from '@antv/g2plot';
import {get} from '@/utils/request'
export default {
    data() {
        return {
            title: '设备状态分布',
            //存放设备状态数据
            empData:[] 
        }
    },
    methods: {
        loadPie() {
            const data = [
                { type: '在线', value: 7 },
                { type: '离线', value: 3 },
            ];

            const piePlot = new Pie(this.$refs.C221, {
                appendPadding: 10,
                data:this.empData,
                angleField: 'value',
                colorField: 'type',
                color: ({ type }) => {
                    if (type === '在线') {
                        return 'red';
                    }
                    return 'yellow';
                },
                radius: 0.8,
                label: {
                    type: 'outer',
                    // content: '{name} {percentage}',
                    content: '{name} {value}台',
                    style: {
                        fill: 'black'
                    }
                },
                legend: {
                    position: 'top',
                    //设置分类图例文本
                    itemName: {
                        style: {
                            fill: 'black'
                        }
                    }
                },
                interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
            });

            piePlot.render();

        },
        //
        async getEmpData(){
            let res = await get('/dashboard/queryDeviceOnlineNumber');
            //console.log(res,'222222');
            this.empData = res.data;
        }
    },
    async mounted() {
        await this.getEmpData();
        this.loadPie();
    }
}
</script>
<style lang="less" scoped></style>